<template>
  <div class="compilation">
    <div class="titles">
      <div class="titles-text">
        <span class="text1">
          进行中
          <em></em>
        </span>
        <span class="text2">
          <em></em>
          已完成
        </span>
      </div>
    </div>
    <div class="colorBox">
      <span>{{finished}}</span>
      <span>{{current}}</span>
    </div>
    <div class="box">
      <table class="box-l">
        <tr v-for="(item,index) in config.data" :key="index">
          <td class="table-type">{{item.type}}</td>
          <td class="table-text">{{map[item.type]}}</td>
          <td class="table-num">{{item.value}}</td>
        </tr>
      </table>
      <dv-capsule-chart :config="config" style="margin-top: 10px;width:40%;height:160px" />
    </div>
  </div>
</template>
<script>
import apis from "../../public/api";

export default {
  name: "compilation",
  data() {
    return {
      current: 0,
      finished: 0,
      config: {},
      map: { "1": "文章", "2": "视频", "3": "音频", "4": "H5" }
    };
  },
  methods: {},
  mounted() {
    let that = this;
    this.axios
      .get(apis.queryTaskBrief, {
        //api.sq  为 api.js 文件夹中，名称为 sq 的接口路径
        params: {}
      })
      .then(res => {
        //此处要使用箭头函数，this指向才正确
        // console.log(res.data.result);
        // let total =  res.data.result.current + res.data.result.overdue + res.data.result.history+ res.data.result.all
        (that.finished = res.data.result.history),
          (that.current = res.data.result.current);
      })
      .catch(function(error) {
        alert(error);
      });

    this.axios
      .get(apis.queryContentDataByType, {
        //api.sq  为 api.js 文件夹中，名称为 sq 的接口路径
        params: {}
      })
      .then(res => {
        //此处要使用箭头函数，this指向才正确
        that.config = {
          data: res.data.result,
          yAxis: {
            show: false
          },
          showValue: true,
          colors: ["#015EEA","#015EEA","#015EEA","#015EEA"]
        };
      })
      .catch(function(error) {
        alert(error);
      });
  }
};
</script>
<style lang="less">
.compilation {
  padding: 38px 20px 0;
  width: 500px;
  height: 250px;
  overflow: hidden;
  background: url(../assets/img/border5-3.png) no-repeat center center / 100%
    100%;
  .titles {
    display: flex;
    .titles-h3 {
      flex: 1;
    }
    .titles-text {
      font-size: 14px;
      color: #d5b574;
      width: 100%;
      overflow: hidden;
      padding: 0 16px;
      .text1,
      .text2 {
        display: flex;
        align-items: center;
        margin-right: 6px;
        float: left;
        color: #1547ff;
        em {
          background-color: #1547ff;
          width: 20px;
          height: 6px;
          background: rgba(21, 71, 255, 1);
          border-radius: 3px;
          margin-left: 10px;
        }
      }
      .text2 {
        float: right;
        color: #0bc3ff;
        text-align: right;
        em {
          margin-right: 6px;
          background-color: #0bc3ff;
        }
      }
    }
  }
  .colorBox {
    display: flex;
    width: 100%;
    height: 16px;
    line-height: 18px;
    color: #ffffff;
    margin-top: 16px;
    font-weight: 600;
    font-size: 12px;
    padding-left: 8px;
    span:first-child {
      width: 80%;
      background-color: #1547ff;
      text-align: left;
      padding-left: 10px;
    }
    span:last-child {
      padding-left: 10px;
      width: 20%;
      text-align: left;
      background-color: #0bc3ff;
    }
  }
  .box {
    display: flex;
    width: 100%;
    height: 130px;
    overflow: hidden;
    padding-left: 10px;
    &-l {
      width: 45%;
      margin-right: 20px;
      text-align: left;
      border-collapse: collapse;
      font-size: 14px;
      margin-top: 15px;
      td {
        padding: 5px 0;
        padding-left: 6px;
        color: #6076a9;
      }
      .table-text {
        width: 70px;
        color: #a76f38;
      }
      .table-type {
        width: 50px;
      }
      tr:first-child {
        .table-type {
          color: #0bc3ff;
        }
        .table-num {
          color: #a5cad6;
        }
      }
      tr:first-child {
        .table-text {
          color: #ffa63d;
        }
      }
    }
  }
}
</style>
